<template>
  <div id="header" class="bcl-black">
    <div class="max-width flex flex-cc flex-rb rel">
      <a href="#index">
        <img src="@/assets/img/logo_large.png" />
      </a>

      <div class="pc">
        <!-- 菜单列表 -->
        <ul class="flex flex-cc">
          <li v-for="(v, i) in navs" :key="i">
            <a :href="`#${v.id}`">{{ $t(`header.${v.label}`) }}</a>
          </li>
          <li class="ml-20">
            <!-- <el-button type="primary" @click="toBlock('sell')">
              {{ $t(`common.预售`) }}
            </el-button> -->
            <el-button type="primary" @click="connectWallet">
              {{ $t(`header.连接钱包`) }}
            </el-button>
          </li>
        </ul>
      </div>

      <div class="mobile">
        <div class="flex flex-cc">
          <!-- <el-button type="primary" @click="toBlock('sell')">
            {{ $t(`common.预售`) }}
          </el-button> -->
          <el-button type="primary" @click="connectWallet">
            {{ $t(`header.连接钱包`) }}
          </el-button>
          <span
            class="el-icon-s-fold fz-30 ml-20 click"
            @click="navVisible = !navVisible"
          ></span>
        </div>

        <!-- 菜单列表 -->
        <ul class="bcl-black" v-if="navVisible">
          <li v-for="(v, i) in navs" :key="i">
            <a
              class="box bd-bottom click"
              :href="`#${v.id}`"
              @click="navVisible = false"
            >
              {{ $t(`header.${v.label}`) }}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import web3 from '@/assets/js/web3'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      navs: [
        {
          id: 'index',
          label: '首页',
        },
        {
          id: 'intro',
          label: '介绍',
        },
        {
          id: 'token',
          label: '代币',
        },
        {
          id: 'path',
          label: '路线图',
        },
      ],
      navVisible: false,
    }
  },

  methods: {
    /**
     * 连接钱包
     */
    connectWallet() {
      web3
        .initContract('IDO', true)
        .then(() => {
          Message.success(this.$t(`common.钱包连接成功`))
        })
        .catch((err) => {
          Message.error(this.$t(`common.钱包连接失败`))
        })
    },

    toBlock(id = '') {
      const a = document.createElement('a')
      a.href = `#${id}`
      a.click()
      a.remove()
    },
  },
}
</script>

<style lang="scss" scoped>
#header {
  padding: 15px 30px;

  img {
    width: 200px;
  }

  .el-button {
    padding: 5px 10px;
  }

  a {
    color: var(--color-white);
  }

  .pc {
    ul {
      a {
        padding: 0 20px;
      }
    }
  }

  .mobile {
    display: none;

    ul {
      position: absolute;
      top: 60px;
      left: -30px;
      width: 100vw;
      padding: 0 15px 30px 15px;

      a {
        display: block;
      }
    }
  }

  @media screen and (max-width: 767px) {
    padding: 10px;

    img {
      width: 150px;
    }

    .pc {
      display: none;
    }

    .mobile {
      display: block;

      ul {
        top: 50px;
        left: -10px;
      }
    }
  }
}
</style>
